<template>
  <div class="homepage">
    <div class="homepage_main">
      <div class="card_top">
        <a-card style="margin-bottom:10px">
          <!-- <div class="newstop">
            <span class="newsbox">最新公告</span>
            <marquee
              class="news"
              direction="left"
            >{{ title }}:{{ content }}</marquee
            >
          </div> -->
        </a-card>
        <a-card>
          <div class="showgrade">
            <span class="gradeBox">
              <p style="font-size: 20px;font-weight: 600;color: blue;">
                {{ info.zx_count }}
              </p>
              <p>当前在线宝贝</p>
            </span>
            <span class="gradeBox">
              <p style="font-size: 20px;font-weight: 600;color: blue;">
                {{ info.stay_examine_count }}
              </p>
              <p>待审核</p>
            </span>
            <span class="gradeBox">
              <p style="font-size: 20px;font-weight: 600;color: blue;">
                {{ info.refuse_count }}
              </p>
              <p>审核被拒</p>
            </span>
            <span class="gradeBox">
              <p style="font-size: 20px;font-weight: 600;color: blue;">
                {{ info.expire_count }}
              </p>
              <p>即将到期</p>
            </span>
          </div>
        </a-card>
        <div class="usermes">
          <a-row
            :gutter="20"
            type="flex"
            justify="space-between"
            style="margin-left:0px; margin-right: 0px; width: 100%;margin:0 auto"
          >
            <a-col :span="14" style="padding-left: 0px;">
              <a-card :bodyStyle="{ padding: '15px' }" style="margin-top:20px">
                <div class="userinfo">
                  <div class="display">
                    <div class="userheadimg">
                      <!-- :src="require('@/assets/images/17-8.png')" -->
                      <img :src="info.user_img" style="width: 75px; height: 75px" alt="" srcset="" />
                    </div>
                    <div class="userinforight">
                      <div style="margin-top: 10px;margin-bottom: 15px;">
                        <span style="font-size: 16px;">{{ info.team_name }}</span>
                      </div>
                      <div style="font-size:16px">
                        <span
                        >已发布商品:<span style="padding-left:10px;padding-right:10px;margin-left: 0px;">{{
                          info.fb_adopt_count
                        }}</span
                        >件</span
                        >
                        <span
                        >发布未通过:<span style="padding-left:10px;padding-right:10px;margin-left: 0px;">{{
                          info.refuse_count
                        }}</span
                        >件</span
                        >
                      </div>
                      <div style="font-size:16px">
                        <span
                        >发布已通过:<span style="padding-left:10px;padding-right:10px;margin-left: 0px;">{{
                          info.adopt_count
                        }}</span
                        >件</span
                        >
                        <span
                        >可发商品:<span style="padding-left:10px;padding-right:10px;margin-left: 0px;">{{
                          parseInt(info.count)
                        }}</span
                        >件</span
                        >
                      </div>
                    </div>
                  </div>
                  <div class="integral">
                    <p>
                      可上单次数 <span style="color:orange;font-size:18px;">{{ parseInt(info.count) }}</span>
                    </p>
                    <a-button type="primary" style="background-color:orange;border:none">立即充值</a-button>
                  </div>
                </div>
              </a-card>
            </a-col>
            <a-col :span="10" style="padding-right: 0px;">
              <a-card :body-style="{ padding: '15px' }" style="margin-top:20px">
                <div>
                  <div style="text-align:left;font-size: 17px;font-weight: 600;">
                    本月月报
                  </div>
                  <div class="monthly">
                    <div class="monthly_left">
                      <div style="font-size: 15px;font-weight: 600;">
                        {{ info.rank }}
                      </div>
                      <div>本月排名</div>
                    </div>
                    <div class="monthly_left">
                      <div style="font-size: 15px;font-weight: 600;">
                        {{ info.integral }}
                      </div>
                      <div>本月消耗积分</div>
                    </div>
                  </div>
                </div>
              </a-card>
            </a-col>
          </a-row>
        </div>
      </div>
      <div class="personlist">
        <div class="personBox">
          <a-card :body-style="{ padding: '15px' }" style="margin-top:20px">
            <div class="clearfix" style="text-align:left">
              <span style="font-size:20px;font-weight: 600;">个人榜单</span>
            </div>
            <div class="person_info">
              <a-row
                :gutter="20"
                type="flex"
                justify="space-between"
                style="margin-left:0px; margin-right: 0px; width: 100%;margin:0 auto"
              >
                <a-col :span="6" style="padding-left: 0px;">
                  <div>
                    <div style="font-size: 18px;font-weight: 600;margin-bottom: 15px;">
                      {{ info.zx_count }}
                    </div>
                    <div>在线商品数</div>
                  </div>
                </a-col>
                <a-col :span="6" style="padding-left: 0px;">
                  <div>
                    <div style="font-size: 18px;font-weight: 600;margin-bottom: 15px;">
                      {{ info.today_count }}
                    </div>
                    <div>今日出单量</div>
                  </div>
                </a-col>
                <a-col :span="6" style="padding-left: 0px;">
                  <div>
                    <div style="font-size: 18px;font-weight: 600;margin-bottom: 15px;">
                      {{ info.coupon_lq_num }}
                    </div>
                    <div>领劵量</div>
                  </div>
                </a-col>
              </a-row>
            </div>
            <div
              style="overflow:hidden;height: 1px;width: 100%;margin: 19px 0;background-color: #DCDFE6;border:0px"
            ></div>
            <div class="person_main">
              <a-row
                :gutter="20"
                type="flex"
                justify="space-between"
                style="margin-left:0px; margin-right: 0px; width: 100%;margin:0 auto"
              >
                <a-col :span="24" style="padding-left: 0px;">
                  <div class="main_left">
                    <div
                      style="border-left: 3px solid rgb(252, 66, 51);padding-left: 25px;font-weight: 600;margin:10px 0;"
                    >
                      今日券领取排行榜
                    </div>
                    <div>
                      <a-table
                        :columns="columns"
                        :rowKey="tableData => tableData.id"
                        :dataSource="tableData"
                        style="width: 100%"
                        :loading="couloading"
                        @change="handleTableChange"
                        :pagination="pagination"
                      >
                        <div slot="goods_img" slot-scope="row">
                          <img :src="row.goods_img" alt="" srcset="" style="width:100px" />
                        </div>
                      </a-table>
                    </div>
                  </div>
                </a-col>

                <a-col :span="24" style="padding-left: 0px;">
                  <div class="main_right">
                    <div
                      style="border-left: 3px solid rgb(63, 127, 253);padding-left: 25px;font-weight: 600;margin:10px 0;"
                    >
                      今日销量排行榜
                    </div>
                    <div>
                      <a-table
                        :columns="columns"
                        :rowKey="todaydata => todaydata.id"
                        :dataSource="todaydata"
                        style="width: 100%"
                        :loading="couloading"
                        @change="handleTableChange2"
                        :pagination="pagination2"
                      >
                        <div slot="goods_img" slot-scope="row">
                          <img :src="row.goods_img" alt="" srcset="" style="width:100px" />
                        </div>
                      </a-table>
                    </div>
                  </div>
                </a-col>
              </a-row>
            </div>
          </a-card>
        </div>
      </div>
    </div>
    <div class="homepage_right">
      <img src="http://img-haodanku-com.cdn.fudaiapp.com/FozDjvPP8G9oCbJ-7ANE3flMneMC" style="width:600px" alt="" />
      <a-card :body-style="{ padding: '15px' }" style="margin-top:20px">
        <div class="main_left">
          <div style="border-left: 5px solid blue;padding-left: 25px;font-weight: 600;margin:10px 0;">
            更新日记专区
          </div>
          <div class="scroll_box" ref="evabox" @scroll="Scroll">
            <div v-for="(item, index) in logList" :key="index">
              <div class="disflex">
                <div class="copy" v-html="item.content" ></div>
                <div>{{ moment(item.create_at).format('L') }}</div>
              </div>
            </div>
            <div style="width:100%;height:40px;text-align:center;">
              <a-spin :spinning="btnloading">
                <a-icon slot="indicator" type="loading" style="font-size: 24px" spin />
              </a-spin>
            </div>
          </div>
        </div>
      </a-card>
      <a-card :body-style="{ padding: '15px' }" style="margin-top:20px">
        <div class="main_left">
          <div style="border-left: 5px solid blue;padding-left: 25px;font-weight: 600;margin:10px 0;">
            辅助信息专区
          </div>
          <div>
            <p>
              京粉客招商助手下载: <a href="http://www.baidu.com" target="_blank" rel="noopener noreferrer">点击下载</a>
            </p>
            <p>京粉客审核交流群: <span style="color:#1890ff">123465789</span></p>
            <p>京粉客直播交流群: <span style="color:#1890ff">123465789</span></p>
            <p>个人在线商品: <a href="http://www.baidu.com" target="_blank" rel="noopener noreferrer">点击查看</a></p>
          </div>
        </div>
      </a-card>
    </div>
  </div>
</template>

<script>
  import moment from 'moment'
import { getSystemUpdateList } from '@/api/systemlog'
import { getTopUserData } from '@/api/data'
import { getTopGoods } from '@/api/stat'
export default {
  name: 'Homepage',
  data () {
    return {
      moment,
      btnloading: false,
      flag: false,
      logList: [],
      columns: [
        {
          title: '排名',
          customRender: (text, record, index) => `${index + 1}`
        },
        {
          title: '商品名称',
          align: 'center',
          dataIndex: 'goods_short_name',
          scopedSlots: {
            customRender: 'goods_short_name'
          }
        },
        {
          title: '图片',
          align: 'center',
          // dataIndex: 'goods_img',
          scopedSlots: {
            customRender: 'goods_img'
          }
        },
        {
          title: '2小时销量',
          align: 'center',
          dataIndex: 'two_coupon_num',
          scopedSlots: {
            customRender: 'two_coupon_num'
          }
        },
        {
          title: '月销量',
          align: 'center',
          dataIndex: 'month_goods_num',
          scopedSlots: {
            customRender: 'month_goods_num'
          }
        },
        {
          title: '日销量',
          align: 'center',
          dataIndex: 'today_coupon_num',
          scopedSlots: {
            customRender: 'today_coupon_num'
          }
        },
        {
          title: '券后价',
          align: 'center',
          dataIndex: 'goods_after_price',
          scopedSlots: {
            customRender: 'goods_after_price'
          }
        },
        {
          title: '优惠券面值',
          align: 'center',
          dataIndex: 'coupon_discount',
          scopedSlots: {
            customRender: 'coupon_discount'
          }
        },
        {
          title: '佣金比例',
          align: 'center',
          dataIndex: 'commission_bl',
          scopedSlots: {
            customRender: 'commission_bl'
          }
        },
        {
          title: '优惠卷总量',
          align: 'center',
          dataIndex: 'coupon_all_num',
          scopedSlots: {
            customRender: 'coupon_all_num'
          }
        },
        {
          title: '领券量',
          align: 'center',
          dataIndex: 'count',
          scopedSlots: {
            customRender: 'count'
          }
        }
      ],

      couloading: false,
      loading: true,
      title: '',
      content: '',
      tableData: [],
      todaydata: [],
      info: {
        team_name: '', // 团队名称
        user_img: '', // 用户头像
        count: '0', // 可用点券数
        zx_count: '', // 当前商品在线的数量
        stay_examine_count: '', // 待审核数量
        refuse_count: '', // 审核被拒数量
        expire_count: '', // 即将到期的商品数量
        today_count: '', // 今日商品销量
        yesterdaynum: '', // 昨日商品销量
        daynum: '', // 本月商品销量
        fb_adopt_count: '', // 申请推广商品数量
        adopt_count: '', // 申请已通过
        rank: '', // 本月排名
        integral: '', // 本月消耗积分
        coupon_lq_num: '', // 领卷量
        today_num: '' // 进两小时销量
      },
      pagination2: {
        pageSize: 15,
        page: 1
      },
      pagination: {
        pageSize: 15,
        page: 1
      },
      num: 1
    }
  },

  computed: {},
  created () {
    this.getSystemUpdateList(1)
    this.getTopUserData()
    this.getTopGoods(1, 1, 15)
    this.getTopGoods(2, 1, 15)
  },
  mounted () {},
  methods: {
    Scroll (e) {
      // console.log(this.$refs.evabox.scrollTop)
      const ele = e.srcElement ? e.srcElement : e.target
      // 监听滚动到div底部
      if (ele.scrollTop + ele.offsetHeight > ele.scrollHeight - 30) {
        // console.log(ele.scrollTop, '+', ele.offsetHeight, '>', ele.scrollHeight - 30)
        this.btnloading = true // 底部设置一个loading 开启加载动画
        if (this.flag === false) {
          // 避免多次请求 加锁 该次请求完成 才能再次发起请求
          this.flag = true
          console.log(this.flag)
          this.num++
          getSystemUpdateList({
            page: this.num,
            pagesize: 4
          })
            .then(res => {
              if (res.code === 200) {
                console.log('日志列表返回', res.data)
                this.logList.push(...res.data.data)
                if (res.data.data.length === 0) {
                  this.btnloading = false
                }
                this.flag = false
              } else {
                this.$message.info(res.msg)
              }
            })
            .catch(err => {
              console.log(err)
            })
        } else {}
      }
    },
    handleTableChange2 (pagination, filters) {
      // console.log(pagination)
      const pager = {
        ...this.pagination2
      }
      pager.current = pagination.current
      this.pagination2 = pager
      this.fetch2({
        results: pagination.pageSize,
        page: pagination.current,
        ...filters
      })
    },
    fetch2 (params = {}) {
      // console.log('params:', params)
      // this.loading = true
      this.getTopGoods(1, params.page, 15)
    },
    handleTableChange (pagination, filters) {
      // console.log(pagination)
      const pager = {
        ...this.pagination
      }
      pager.current = pagination.current
      this.pagination = pager
      this.fetch({
        results: pagination.pageSize,
        page: pagination.current,
        ...filters
      })
    },
    fetch (params = {}) {
      // console.log('params:', params)
      // this.loading = true
      this.getTopGoods(2, params.page, 15)
    },
    // 上单用户榜单商品接口
    getTopGoods (type, page, pagesize) {
      getTopGoods({
        type: type,
        // search: search,
        // start: start,
        // end: end,
        page: page,
        pagesize: pagesize
      })
        .then(res => {
          if (res.code === 200) {
            console.log('榜单商品', res)
            if (type === 1) {
              this.todaydata = res.data.data
            } else {
              this.tableData = res.data.data
            }
          } else {
            this.$message.info(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 上单用户数据概览接口
    getTopUserData () {
      getTopUserData()
        .then(res => {
          if (res.code === 200) {
            console.log('数据概览返回', res)
            this.info = res.data
          } else {
            this.$message.info(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },

    // 获取日志列表
    getSystemUpdateList (page) {
      getSystemUpdateList({
        page: page,
        pagesize: 4
      })
        .then(res => {
          if (res.code === 200) {
            console.log('日志列表返回', res.data)
            // this.logList = []
            this.logList = res.data.data
          } else {
            this.$message.info(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>

<style lang="less" scoped>
/deep/.ant-card-body {
  padding: 0;
}
.display {
  display: flex;
}
.homepage {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  .homepage_main {
    width: 1500px;
    .newstop {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      width: 100%;
      height: 60px;
      line-height: 60px;
      // padding: 10px;
      text-align: left;
      .newsbox {
        display: inline-block;
        background-color: #fc4233;
        color: #ffffff;
        border-radius: 8px;
        padding: 0px 20px;
        margin-right: 30px;
        margin-left: 20px;
        width: 106px;
        height: 40px;
        line-height: 40px;
      }
      .news {
        display: inline-block;
        width: 98%;
        font-size: 18px;
        height: 40px;
        line-height: 40px;
        margin-right: 10px;
        // background-color: #000;
      }
    }
    .permis {
      padding: 10px 0;
    }
    .showgrade {
      height: 103px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      .gradeBox {
        padding: 20px;
        p {
          margin: 0;
        }
      }
    }
    .usermes {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .userinfo {
        width: 100%;
        height: 88px;
        display: flex;
        justify-content: space-around;
        align-items: flex-start;
        text-align: left;
        .userinforight {
          span {
            margin-left: 15px;
          }
        }
        .userheadimg {
          width: 75px;
          height: 75px;
          margin-top: 5px;
          margin-right: 10px;
          border-radius: 50%;
          overflow: hidden;
        }
      }
      .monthly {
        width: 100%;
        height: 66px;
        display: flex;
        justify-content: space-around;
        align-items: center;
      }
    }
    .salesBox {
      .sales_data {
        display: flex;
        justify-content: space-around;
        align-items: center;
        .sales_today {
          padding: 20px;
          background-color: rgb(255, 175, 61);
          color: rgb(255, 255, 255);
          width: 250px;
          height: 60px;
          border-radius: 10px;
        }
        .sales_yesterady {
          padding: 20px;
          color: rgb(255, 255, 255);
          width: 250px;
          height: 60px;
          border-radius: 10px;
          background-color: #2ad1a8;
        }
        .sales_month {
          padding: 20px;
          color: rgb(255, 255, 255);
          width: 250px;
          height: 60px;
          border-radius: 10px;
          background-color: #3f7ffd;
        }
        .line {
          border-left: 3px solid rgb(255, 255, 255);
          padding-left: 25px;
          text-align: left;
          font-weight: 600;
        }
      }
    }
    .personlist {
      .personBox {
        .person_info {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          padding-bottom: 20px;
          padding: 15px;
        }
        .person_main::v-deep {
          text-align: left;
          .cell {
            text-align: center;
          }
          // .main_left {
          //   width: 100%;
          // }
          // .main_right {
          //   width: 100%;
          // }
        }
      }
    }
  }
  .homepage_right {
    width: 600px;
    margin-left: 15px;
    .scroll_box{
      width: 100%;
      height: 150px;
      overflow-y: auto;
      .disflex{

        display: flex;
      justify-content: space-between;
      align-items: center;
      }
      .copy{
        overflow: hidden;
      text-overflow: ellipsis;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      display: -webkit-box;
      }
    }
  }
}
</style>
